body {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	color:#333;
}
@font-face {
    font-family: 'din';
    src: url('../ttf/din-webfont.eot');
    src: url('../ttf/din-webfont.eot?#iefix') format('embedded-opentype'),
         url('../ttf/din-webfont.woff') format('woff'),
         url('../ttf/din-webfont.ttf') format('truetype'),
         url('../ttf/din-webfont.svg#din') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 { font-weight:normal; font-family:"din", sans-serif; }
h3, h4, h5, p { margin-top:15px; }
h3:first-child, h4:first-child, p:first-child { margin-top:0; }

.f-left { float:left; }
.f-right { float:right; }
.center { text-align:center; margin-top:15px; }

.spacer-10 { height:10px; display:block; width:100%; clear:both; }
.spacer-20 { height:20px;display:block; width:100%; clear:both; }
.spacer-30 { height:30px; display:block; width:100%; clear:both; }
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }

/* navigation */
#tab_nav {
	position:fixed;
	bottom:0;
	left:0;
	padding-top:30px;
	height:100px;
	width:100%;
	overflow:hidden;
}

#tab_nav ul {
	position:relative;
	width:1000%;
	height:100%;
}

#tab_nav li {
	position:relative;
	float: left;
	width: 100px;
	height:80px;
	padding:10px;
	font-size:0.875em;
	color:#FFF;
	cursor:pointer;
}
#tab_nav li.current {
	box-shadow:0 20px 30px 2px rgba(0,0,0,0.6);
	z-index:1;
}

#tab_nav span { position:absolute; bottom:5px; right:10px; font-size:1.5em; }
#tab_nav .n1 { background-color:#008A5F; }
#tab_nav .n2 { background-color:#EE3224; }
#tab_nav .n3 { background-color:#7D0063; }
#tab_nav .n4 { background-color:#FDBB30; }
#tab_nav .n5 { background-color:#6E3219; }
#tab_nav .arrow { display:none; position:absolute; bottom:100%; left:0; width:120px; height:20px; background:url(../img/bg_arrow.png); }
#tab_nav li.current .arrow { display:block; }
#tab_nav .n1 .arrow { background-position:0 0; }
#tab_nav .n2 .arrow { background-position:0 -20px; }
#tab_nav .n3 .arrow { background-position:0 -40px; }
#tab_nav .n4 .arrow { background-position:0 -60px; }
#tab_nav .n5 .arrow { background-position:0 -80px; }

a.scrollLeft, a.scrollRight { display:none; position:absolute; bottom:0; left:0; width:40px; height:100px; background:url(../img/scroll.png); cursor:pointer; z-index:2; }
a.scrollRight { left:auto; right:0; background-position:-40px 0; }

/* panes */
#panes {
	width:100%;
	height:100%;
	position:relative;
}

/* crossfading effect needs absolute positioning from the elements */
#panes > div {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:80%;
	height:100%;
	padding:0 5% 0 15%;
}

#panes div.content {
	height:85%;
	overflow: auto;
}

#panes h2 {
	margin:20px 0;
	font-size:2.5em;
	letter-spacing:-0.04em;
	line-height:0.9;
	text-align:right;
}
#panes div.n1 h2, #panes div.n1 h3 { color:#008A5F; }
#panes div.n2 h2, #panes div.n2 h3 { color:#EE3224; }
#panes div.n3 h2, #panes div.n3 h3 { color:#7D0063; }
#panes div.n4 h2, #panes div.n4 h3 { color:#FDBB30; }
#panes div.n5 h2, #panes div.n5 h3 { color:#6E3219; }

#panes h3 { font-size:1.25em; }
#panes h4 { font-size:1em; }
#panes h5 { font-size:0.875em; text-align:center; }

#panes img.block { display:block; width:100%; margin:15px 0; }
#panes img.block:first-child { margin-top:0; }
#panes img.f-right { margin:0 0 15px 20px; }
#panes img.fondo { position:fixed; top:0; left:0; z-index:-1; margin:0; }

ul.lista { list-style:disc outside none; padding-left:15px; }
ul.lista li { margin-top:15px; }

div.graficos { width:100%; max-width:600px; margin:0 auto; }
ul.tabs { float:left; position:relative; width:100%; margin-top:15px; z-index:1; }
ul.tabs li { float:left; padding:5px 10px; border:solid 1px #666; border-left:none; background-color:#EEE; cursor:pointer; }
ul.tabs li:first-child { border-left:solid 1px #666; }
ul.tabs li:hover { background-color:#FFF; }
ul.tabs li.current { border-bottom-color:#FFF; background-color:#FFF; font-weight:bold; }
div.pane { float:left; position:relative; top:-1px; width:95%; max-width:598px; border:solid 1px #666; background-color:#FFF; z-index:0; }
div.pane img { width:100%; }
div.center img { width:100%; max-width:600px; }

.overlay {
	display:none;
	width:500px;
	padding:20px;
	background-color:#ddd;
}